<script setup lang="ts">

import {onMounted, ref} from "vue";


import { useRoute } from "vue-router"; // 获取参数 用 useRoute

import myAxios from "../plugins/myAxios.ts";
import {router} from "../main.ts";


const route = useRoute(); // 获取参数 用 useRoute


onMounted(() => {
  myAxios.get("/learn/video", {
    params: {
      pathId: route.query.id
    }
  })
   .then(res => {
      videos.value = res.data.data;
      console.log(res.data.data);
      console.log(videos.value);
    })
   .catch(err => {
     console.log(err);
   })
})

const videos = ref<{
  id: number;
  url: string;
  description: string;
  note: number;
}[]>()

const handleClick = (id: number) => {
  console.log(id);
  router.push({
    path: '/topic',
    query: {
      id: id,
    }
  })
}
const onClickLeft = () => {
  router.push('/learnPath')
}



</script>

<template>
  <van-nav-bar class="nav-bar"
               title="学习视频"
  >
  </van-nav-bar>
  <div id="building">
    <img src="../assets/最终返回键.png" class="back-btn1" alt="返回" @click="onClickLeft" />
  </div>

  <div class="show-video">
    <van-grid :border="true" :column-num="3" style="width: 100%; height: 60%;">
      <div v-for="video in videos" :key="video.id" class="video-item">
        <img src="../assets/最终视频背景.png" class="video-bg" @click="handleClick(video.id)">
        <img src="https://lanyun-1325629469.cos.ap-chongqing.myqcloud.com/test/(CP9%5D%5BQNFT9QKH3M(R(KZH2.png" class="video-bg" style="width:80%;height:50%;top:55%;left:50%;transform:translate(-50%,-50%);position:absolute;" @click="handleClick(video.id)">
        <div class="video-description">
        {{video.description}}
        </div>
      </div>

    </van-grid>
  </div>




</template>



<style scoped>

.video-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}

.video-description {


  position: absolute;
  top: 14%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-size: 16px;
  text-align: center;
  width: 100%;
  height: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.show-video {
  top:46px;
  width: 100%;
  height: calc(100% - 46px);
  position: relative;
}

.video-item {
  width: calc(50% - 4px);
  height: calc(50% - 4px);
  position: relative;
  border: 2px solid #ccc;
}

.nav-bar {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 46px;
  background-image: url("../assets/导航栏2.png");
  opacity:1;
  z-index:1;
}
.back-btn1 {
  position:fixed;
  float: left;
  top: -5px;
  width: 50px;
  height: 60px;
  z-index:2;
}

</style>